<template>

    <div>
        <!--    以页面的形式展示-->
        <template v-if="showType=='page'">
            <div class="back_page shadow radius" v-if="show" v-loading="loading">

                <div class="page_hd">
                    <el-page-header :icon="ArrowLeft" @back="close">
                        <template #content>
                            <span> {{title}} </span>
                        </template>
                        <template #extra>
                            <slot name="extra">
                                <el-button type="primary" @click="submit">保存信息</el-button>
                                <el-button @click="close">取消</el-button>
                            </slot>
                        </template>
                    </el-page-header>
                </div>

                <div class="page_bd">
                    <el-scrollbar>
                        <slot></slot>
                        <div class="p20 f_secondary text_center">~~ 到底了 ~~</div>
                    </el-scrollbar>
                </div>
            </div>
        </template>

        <!--    以对话框的形式展示-->
        <template v-else-if="showType=='dialog'">
            <mi-dialog :model-value="show" @update:modelValue="dialogModelValueChange" :show-close="false">

                <template #header>
                    <div class="d_flex flex_ai_c flex_jc_sb">
                        <div>{{title}}</div>
                        <div>
                            <el-button type="primary" @click="submit">保存信息</el-button>
                            <el-button @click="close">取消</el-button>
                        </div>
                    </div>
                </template>

                <div v-loading="loading">
                    <slot></slot>
                    <div class="p20 f_secondary text_center">~~ 到底了哦 ~~</div>
                </div>

            </mi-dialog>
        </template>
    </div>

</template>

<script setup lang="ts">
import {defineProps} from "vue";
import { ArrowLeft } from '@element-plus/icons-vue'


const props = withDefaults(defineProps<{
    title?:string,
    show:boolean,
    showType?:string,   // 显示方式， dialog-对话框 page-页面
    loading:boolean,
    noBack?:boolean,
}>(), {
    title:'',
    show:false,
    showType:'dialog',
    loading:true,
    noBack:false,
})

const emits = defineEmits(['submit', 'update:show'])

const close = () => {
    if (props.noBack){
        return;
    }
    emits("update:show", false)

}

const dialogModelValueChange = (e:any) => {
    emits("update:show", e)
}

const submit = () => {
    emits("submit")
}
</script>

<style scoped>
.back_page{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
    padding: 15px;
}
.page_hd{
    height: 50px;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;

}
.page_bd{
    padding-top: 15px;
    box-sizing: border-box;
    height: calc(100% - 50px);
}
</style>
